<template>
  <div class="hospital main-container">
    <div class="el-scroll_wrap">
      <div class="el-scroll">
        <div class="nav-container">
          <div class="nav left-nav">
            <div class="nav-item selected">预约挂号</div>
            <div class="nav-item">医院详情</div>
            <div class="nav-item">预约须知</div>
            <div class="nav-item">停诊信息</div>
            <div class="nav-item">查询/取消</div>
          </div>
        </div>
      </div>
      <!-- -----------------页面详情----------- -->
      <div class="pageShow">
        <router-view></router-view>
      </div>
    </div>
    <!-- ---------------医院公告弹窗 ------------------>
    <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="解放军医院（301医院）公告"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>{{hosNotice}}</span>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="centerDialogVisible = false">我知道了</el-button>
      </span>
    </el-dialog>
    <div class="line"></div>
    </div>
</template>
<script>
import {get} from '../../api/api.js'
export default {
    name:'Hospital',
    data() {
        return {
          activeIndex: 'home',
          activeIndex2: '1',
          hosNotice: '',
          centerDialogVisible: false
        }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      initData () {
        get('data').then(res=>{
          console.log(res)
          if(res.notice) {
            this.hosNotice = res.notice
          }
        })     
      }
    },
    created() {
      this.initData()
    }
    
}
</script>

<style lang="scss">
.main-container{
  border: 1px solid red;
  width: 1200px;
  margin: 0 auto;
  .el-scroll_wrap {
    display: flex;
    .el-scroll {
      flex: 0 0 200px;
      border: 1px solid yellow;
      .nav-container {
        width: 100%;
        position: sticky;
        top: 14px;
        float: left;
        font-size: 14px;
        .nav-item {
          width: 100%;
          height: 70px;
          line-height: 70px;
          padding-left: 20px;
          &.selected {
            color:#4490f1;
            font-size: 16px;
            padding-left: 0px;
            font-weight: 500;
            &::before {
              content: '■ ';
              font-size: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
    .pageShow {
      flex: 1;
      border: 1px solid green;
    }
  }  
}    
</style>